<script>
import 'animate.css/animate.min.css';
export default {
  name: 'Test_Component2',
  data() {
    return {
      isShow: true,
      showClass: '',
    }
  },
  methods: {
    showOrHide() {
      this.isShow = !this.isShow;
    }
  }
}
</script>

<template>
  <div>
    <!--    使用过渡-->
    <button @click="showOrHide">显示/隐藏</button>

    <transition-group
        name="animate__animated animate__infinite"
        appear
        enter-active-class="animate__fadeInUp"
        leave-active-class="animate__backOutUp" >
      <h1 v-show="!isShow" key="1">HELLO,WORLD</h1>
      <h1 v-show="isShow" key="2">GOODBYE,WORLD</h1>
    </transition-group>
  </div>
</template>

<style scoped>
h1 {
  color: white;
  background-color: darkblue;
  text-align: center;
}


</style>